<template>
    <div class="header">
        <div class="collapse">
            <i :class="headerCollapseClass" @click="headerCollapseClick"></i>
        </div>
        <div class="center">
            <span>其它</span>
        </div>
        <div class="operation">
            <el-dropdown @command="toSave" trigger="click">
        <span class="el-dropdown-link">
          {{ this.$store.state.headerTag.adminInfoMe.name }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="1">修改个人信息</el-dropdown-item>
                    <el-dropdown-item :command="2">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
            <el-form :model="adminInfoMeForm" :rules="adminInfoMeRules" label-width="80px" ref="adminInfoMeForm" size="mini">
                <el-form-item label="姓名" prop="name">
                    <el-input clearable placeholder="请输入" v-model="adminInfoMeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input clearable placeholder="留空则不修改" v-model="adminInfoMeForm.password"></el-input>
                </el-form-item>
            </el-form>
            <span class="dialog-footer" slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="adminMeSave" type="primary">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        computed: {
            headerCollapseClass() {
                return this.$store.state.headerTag.headerCollapseClass;
            }
        },
        data() {
            return {
                loading: false,
                dialogVisible: false,
                dialogWay: '',
                dialogTitle: '',
                adminInfoMeForm: {
                    name: '',
                    password: '',
                },
                adminInfoMeRules: {
                    name: [{required: true, message: "请输入", trigger: "blur"}],
                },
                adminInfoMe: {}
            };
        },
        created() {

        },
        methods: {
            toSave(command) {
                switch (command) {
                    case 1:
                        this.adminMeEdit();
                        break
                    case 2:
                        this.loginOut();
                        break
                }
            },
            headerCollapseClick() {
                this.$store.commit("headerCollapseClick")
            },
            loginOut() {
                this.$http.post("loginOut").then(({code, message}) => {
                    if (code === 20000) {
                        this.$message.success(message)
                        this.$storage.delLocal("adminInfoMe")
                        this.$router.push({name: "Login"})
                    }
                });
            },
            adminMeEdit() {

                this.dialogTitle = '修改个人信息'
                this.dialogWay = 'adminMeEditSave'
                let adminInfoMe = this.$store.state.headerTag.adminInfoMe

                this.adminInfoMeForm = {
                    name: adminInfoMe.name,
                    password: ''
                };

                this.dialogVisible = true
            },
            adminMeSave() {
                this.$refs["adminInfoMeForm"].validate(valid => {
                    if (!valid) return false

                    this.$http.post(this.dialogWay, this.adminInfoMeForm).then(({code, message}) => {
                        if (code === 20000) {
                            this.$message.success(message)
                            this.dialogVisible = false
                        }
                    })
                })
            },
        },
        inject: ["reload"]
    };
</script>

<style lang="scss" scoped>
    .header {
        width: 100%;
        height: 100%;
        background: rgb(84, 92, 100);
        display: flex;
        align-items: center;
        // justify-content: center;
        .collapse {
            flex: 0 0 40px;
            font-size: 20px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .center {
            flex: 1;
            text-align: right;
            margin-right: 30px;
            color: #fff;
        }

        .operation {
            flex: 0 0 100px;

            .el-dropdown-link {
                cursor: pointer;
                color: #fff;
            }

            .el-icon-arrow-down {
                font-size: 12px;
            }
        }
    }
</style>